<style>
    tr.hide{
        display: none;
    }
    div.quickeditcat{
        float: left;   
        padding: 10px; 
        background: #F7EFF8;
    }
    div.quickeditcat > label{
        float: left;
        margin: 10px;font-weight: bold; color: blue;
    }
    div.catname{
        float:left;
        width: 100%;
        margin-bottom: 10px;
    }
    div.catname input{
        float: left;width: 200px;
        border: 1px solid #8C8980;
        padding: 5px 10px;
    }
    div.catname textarea{
        float: left;width: 380px;height: 100px;
        border: 1px solid #8C8980;
         padding: 5px 10px;
    }
    div.catname label{
        float:left;
        width: 100px;
    }
    .btsave,.btcancel:hover{
        float: left;
        padding: 3px 5px;
        background: #1A1AFF;color: white;font-weight: bold;
        border: 1px solid #0000DD;cursor: pointer;
        -moz-border-radius:15px;
    }
    .btcancel,.btsave:hover{
        float: left;cursor: pointer;
        padding: 3px 5px;
        background: white;color: #B300B3;font-weight: bold;
        border: 1px solid #B1BAB6;margin-right: 200px;
        -moz-border-radius:15px;
    }
    input.btquickedit{
        color: white; background: #F49759; border:1px solid #D85F0E; 
        -moz-border-radius:10px 10px 10px 10px; padding: 2px 5px;
        font-weight: bold;
    }
    input.btquickedit:hover{
        background: #1CC631;
        border-color: #159926;
        cursor: pointer;
    }
    
    div.catimg{
        float:left; width: 29%;
        text-align: center;
        
    }
    
</style>
<script>
    $(function(){
        $('tr.editCat').mouseover(function(){
            $(this).css('background','#f5f5f5');
            var id=$(this).attr('title');
            $('div#cat'+id).show().stop(); 
        });
        $('tr.editCat').mouseout(function(){
            $(this).css('background','white');
            var id=$(this).attr('title');
            $('div#cat'+id).hide().stop(); 
        });
    });
    
    function onEditCategory(_id){
        $('tr.disable').fadeIn('slow');
        $('tr#post_'+_id).fadeOut();
        $('tr#post_'+_id).addClass('disable');        
        $('tr.postactive').fadeOut();
        $('tr#quickeditcat'+_id).fadeIn();
        $('tr#quickeditcat'+_id).addClass('postactive');
    }
    
    function onCanceledit(_id){
        $('tr#post_'+_id).fadeIn();
        $('tr#quickeditcat'+_id).fadeOut();
    }
    
    function onSaveCat(_id){
        var catname = $('#catname'+_id).val();
        var catdes = $('#catdes'+_id).val();
        if(catname!='' || catdes!=''){
            $.ajax({
                url:baseUrl()+'/admin/category/quickedit/id/'+_id+'/name/'+catname+'/des/'+catdes,
                dataType:'html',
                success:function(msg){
                    if(msg=='1'){
                        $('#catname'+_id).val(catname);
                        $('#postname'+_id).html(catname);
                        $('#postdes'+_id).html(catdes);
                        $('#catdes'+_id).val(catdes);
                        onCanceledit(_id);
                        return false;
                    }
                }
            });        
        }
    }

</script>


<?php 
$data = $this->data;
?>
<h1>Manage the main categories</h1>
	<form name="frmCatAdm" method="post" enctype="multipart/form-data" style="float: left;">
    	<div style="float:left;">Keyword: <input type="text" name="keyword" value="<?php echo 'key word'; ?>" />&nbsp;<input type="button" value="Search" onclick="onSearch();" /></div>
		<div class="add-del" style="float:right;">
			<input type="button" value="ADD" onclick="onAdd('/admin/category/add');" />&nbsp;&nbsp;
			<input type="button" value="DELETE" name="delAll" onclick="onDelAll('/admin/category/delete/id/');" />
		</div>
		<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<th>Nbrs</th>
				<th>Category name</th>
				<th>Description</th>
				<th>Image</th>
				<th colspan="2">Action</th>
				<th><input type="checkbox" name="chkMasCheck" value="" onclick="onCheckAll();" /></th>
			</tr>
			<?php $i=1; foreach($data as $item): ?>
			<tr id="post_<?php echo $item['cat_id']; ?>" class="editCat" title="<?php echo $item['cat_id']; ?>">
				<td align="center"><?php echo $i; ?></td>
				<td id="<?php echo $item['cat_id']; ?>" >
                    <label id="postname<?php echo $item['cat_id']; ?>">
                        <?php echo $item['cat_name']; ?>
                    </label>                
                    <div  id="cat<?php echo $item['cat_id'];?>" style="display: none;margin: 0 0 -10px -10px;">     
                        <input class="btquickedit" id="bt<?php echo $item['cat_id'];?>" onclick="onEditCategory('<?php echo $item['cat_id'];?>');" type="button" value="Quick edit" />                                 
                    </div>                
                </td>
				<td>
                    <label id="postdes<?php echo $item['cat_id'];?>">
                    <?php echo $item['cat_des']; ?>
                    </label>
                </td>
				<td align="center">
                <a class="fancybox" href="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $item['cat_img']; ?>">
                    <img src="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $item['cat_img']; ?>" alt="<?php echo $item['cat_img']; ?>" width="50" height="50" style="border:1px solid #c0c0c0; padding:3px;"/>
                </a>
                </td> 
				<td align="center">
                <a href="<?php echo $this->baseUrl(); ?>/admin/category/edit/id/<?php echo $item['cat_id']; ?>">
                    <img class="change" src="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/edit.png" title="edit" alt="edit" />
                </a>
                </td>
				<td align="center">
                    <a href="javascript:void(0);" onclick="onDel('/admin/category/delete/id/<?php echo $item['cat_id']; ?>');">
                        <img class="change" src="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/del.png" alt="delete" title="delete" />
                    </a>
                </td>
				<td align="center"><input type="checkbox" name="chk" value="<?php echo $item['cat_id']; ?>" /></td>
			</tr>
            <tr id="quickeditcat<?php echo $item['cat_id']; ?>" class="hide">
                <td colspan="7">
                    <div class="quickeditcat">                    
                    <div style="float: left; width:70%;border-right: 2px dotted #008040;">
                    <label style="float: left; width: 100%;padding: 0 0 20px 0; font-weight: bold; font-size: 20px;">Quick edit</label>
                    <div class="catname">
                        <label>Name</label>
                        <input id="catname<?php echo $item['cat_id']; ?>" value="<?php echo $item['cat_name']; ?>" />    
                    </div>
                    <div class="catname">
                        <label>Description</label>
                        <textarea id="catdes<?php echo $item['cat_id']; ?>"><?php echo $item['cat_des']; ?></textarea>    
                    </div>
                    <input class="btcancel" type="button" value="Cancel" onclick="onCanceledit('<?php echo $item['cat_id']; ?>');" />
                    <input class="btsave" type="button" value="Save" onclick="onSaveCat('<?php echo $item['cat_id']; ?>');" />
                    </div>
                    <div class="catimg">
                        <label>Image display</label><br />
                        <a class="fancybox" href="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $item['cat_img']; ?>">
                            <img src="<?php echo $this->baseUrl(); ?>/app/templates/admin/images/upload/category/<?php echo $item['cat_img']; ?>" alt="<?php echo $item['cat_img']; ?>"  style="border:1px solid #c0c0c0; padding:3px; max-height:150px;max-width: 200px;"/>
                        </a>
                    </div>
                    </div>
                    
                </td>
            </tr>
			<?php $i++; endforeach; ?>
		</table>
		<div class="paging"><?php echo 'paging'; ?></div>
	</form>